<template>
  <div class="user">
    <div style="display: flex; margin-left: 20px">
      <div class="search">
        <el-input
          placeholder="请输入用户电话"
          v-model="input"
          clearable
          style="width: 200px; margin-top: 2px; margin-right: 5px"
        >
        </el-input>
        <el-button type="primary" @click="selectUser">查询</el-button>
      </div>
      <el-button
        type="success"
        style="height: 40px; margin-top: 2px; margin-left: 5px"
        @click="addUser"
        >添加</el-button
      >
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="电话" width="180">
        <template slot-scope="scope">
          <i class="el-icon-mobile-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.userPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <add-user
      :dialogVisible="dialogVisible"
      @changeVisible="changeVisibleState"
      @addUserData="addUserDataCheck"
    ></add-user>
    <edit-user :editDialogVisible="editDialogVisible"
      @changeEditVisible="changeVisibleState"
      :obj="obj"
      :i = "i"
      @editData="changeUserDateCheck"
      ></edit-user>
      <!-- @changeUserDate="changeUserDateCheck" -->
  </div>
</template>

<script>
import addUser from "./user/addUser.vue";
import editUser from "./user/editUser.vue";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          userPhone: "17832816581",
        },
        {
          date: "2016-05-04",
          name: "王二麻子",
          address: "上海市普陀区金沙江路 1517 弄",
          userPhone: "18858263312",
        },
        {
          date: "2016-05-01",
          name: "毛晓彤",
          address: "上海市普陀区金沙江路 1519 弄",
          userPhone: "15828117842",
        },
        {
          date: "2016-05-03",
          name: "陈立农",
          address: "上海市普陀区金沙江路 1516 弄",
          userPhone: "15158263321",
        },
      ],
      input: "",
      dialogVisible: false,
      editDialogVisible:false,
      obj:'',
      i:null
    };
  },
  components: {
    addUser,
    editUser,
  },
  methods: {
    handleEdit(index, row) {
      this.editDialogVisible = true;
      this.obj = row;
      this.i = index;
    },
    handleDelete(index, row) {
      const h = this.$createElement;
      this.$msgbox({
        title: "删除",
        message: h("p", null, [
          h("i", { style: "color: teal" }, "请确认是否删除"),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
                this.tableData.splice(index, 1);
              }, 300);
            }, 1000);
          } else {
            done();
          }
        },
      }).then((action) => {
        this.$message({
          type: "info",
          message: "action: " + action,
        });
      });
    },
    selectUser() {
      if (this.input.length > 0) {
        let msg = `查询${this.input}成功`;
        this.input = "";
        this.$alert(msg, "查询", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },
    addUser() {
      this.dialogVisible = true;
    },
    changeVisibleState(val) {
      this.dialogVisible = val;
      this.editDialogVisible = val;
    },
    addUserDataCheck(val) {
      let data = {
        date: val.userDate1,
        name: val.name,
        address: val.address,
        userPhone: val.phone,
      };
      console.log(data);
      this.tableData.push(data);
    },
    changeUserDateCheck(val){
      this.tableData[val.i].date = val.dataForm.userDate1;
      this.tableData[val.i].name = val.dataForm.name;
      this.tableData[val.i].address = val.dataForm.address;
      this.tableData[val.i].userPhone = val.dataForm.phone;
    }
  },
};
</script>

<style lang="scss" scoped>
.user {
  width: calc(100vw - 80px);
}
</style>